<template>
  <div class="s_goods_list" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
    <div class="item" v-for="(v,k) in goodsList" :key="k">
      <dl>
        <router-link :to="`/home/goods/detail/${v.id}`">
          <dt>
<!--            <el-image class="el_image" lazy :src="v.imgUrl" alt="" />-->
            <el-image class="el_image" lazy :src="getFirstImageUrl(v.imgUrl)" alt="" />
          </dt>
          <dd class="title">{{ v.name }}</dd>
          <dd class="price">￥{{ v.price }}</dd>
          <dd>
            <span>立即购买</span>
            <span>{{ v.sale }} 人评论</span>
          </dd>
        </router-link>
      </dl>
    </div>
  </div>
  <div class="to_bottom" v-if="disabled">
   <p> {{disabled ? "不要下滑了，已触发我的底线":"下滑 加载更多"}}</p>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue'
import type { MallGoodsVO } from '@/api/home/mallGoods/types'
import { getGoodsListApi } from '@/api/home/mallGoods'

const disabled=ref<boolean>(false)
const goodsList = ref<MallGoodsVO[]>([])
const data = reactive<any>({
  base64Code: '',
  base64Decode: {},
  total: undefined,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    cate1Id: undefined,
    cate2Id: undefined,
    cateId: undefined,
    price: undefined,
    sale: undefined,
    collect: undefined,
    brandId: undefined
  }
})
const { queryParams } = toRefs(data)
const getGoodsList = async () => {
  const res: any = await getGoodsListApi(queryParams.value)
  console.log(res)
  goodsList.value = res.rows
}
/*无限加载*/
const load=async ()=>{
  //获取下一页数据
  queryParams.value.pageNum ++
  const res: any = await getGoodsListApi(queryParams.value)
  //老数据 拼接 新数据
  goodsList.value=[...goodsList.value,...res.rows]
  //加载完毕停止监听
  if(res.rows.length===0){
    disabled.value=true;
  }
}
/*取第一张图片*/
const getFirstImageUrl = (imageUrls: string) => {
  const image = imageUrls.split(',')
  return image.length > 0 ? image[0] : '@/assets/images/none.png'
}
onMounted(() => {
  getGoodsList()
})
</script>

<style scoped lang="scss">
.s_goods_list {
  margin-top: 40px;
  margin-bottom: 30px;
}

.s_goods_list .item {
  background-color: #fff;
  float: left;
  width: 224px;
  height: 364px;
  box-sizing: border-box;
  margin: 0 20px 20px 0;

  &:nth-child(5n) {
    margin-right: 0;
  }
}

.s_goods_list .item dl {
  border: 1px solid #efefef;
  box-sizing: border-box;
  width: 224px;
  height: 364px;
  transition: all 0.2s linear;
}

.s_goods_list .item dl dt {
  padding-top: 26px;
  padding-bottom: 26px;
  text-align: center;
}

.s_goods_list .item:hover dl {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: -3px;
}

.s_goods_list .item dl dd.title {
  color: #000;
  height: 38px;
  text-align: center;
  padding: 0 15px;
  overflow: hidden;
}

.s_goods_list .item dl dd.price {
  color: #e01d20;
  line-height: 50px;
  text-align: center;
  padding: 0 15px;
  font-size: 20px;
  overflow: hidden;
}

.s_goods_list .item dl dd.price font {
  color: #999;
  font-size: 12px;
}

.s_goods_list .item dl dd span {
  width: 50%;
  display: block;
  border-top: 1px solid #efefef;
  float: left;
  line-height: 41px;
  text-align: center;
}

.s_goods_list .item dl dd span.integral {
  width: 100%;
  display: block;
  border-top: 1px solid #efefef;
  float: left;
  line-height: 41px;
  text-align: center;
}

.s_goods_list .item dl dd span:first-child {
  box-sizing: border-box;
  border-right: 1px solid #efefef;
}

.s_goods_list .item dl dd span:first-child:hover {
  color: #fff;
  background: #ca151e;
}

.s_goods_list .item .el_image {
  width: 176px;
  height: 176px;
}
.to_bottom{
  text-align: center;
  color: #FE6A00;
}
</style>